<template>
    <div class="home">
        <Header head-title="消费充值记录" go-back="true"></Header>
        <section class="group">
            <img class="ImgNone" src="../../assets/img/voucher.png" alt="">
            <p class="fonts">您还没有任何消息通知</p>
        </section>
        <section class="group">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="消费记录" name="first">
                    <section class="Select IconCom" @click="Consumrecord()">
                        <div class="IconLeft">
                            <img src="../../assets/img/iconhao.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>挂号支付
                              <span class="fontC fontsMin">普通门诊</span>
                            </h3>
                            <p class="fontsB activecolor">￥9.0</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                    <section class="Select IconCom" @click="Consumrecord()">
                        <div class="IconLeft">
                            <img src="../../assets/img/iconzhen.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>门诊支付
                              <span class="fontC fontsMin">普通门诊</span>
                            </h3>
                            <p class="fontsB activecolor">￥9.0</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                </el-tab-pane>
                <el-tab-pane label="充值记录" name="second">
                  <section class="Select IconCom" @click="Rechargerecord()">
                        <div class="IconLeft">
                            <img src="../../assets/img/cardrecord.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>健康卡充值</h3>
                            <p class="fontsB activecolor">+￥300</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <p class="fonts">卡号：000029293030(渣渣辉) </p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                    <section class="Select IconCom" @click="Rechargerecord()">
                        <div class="IconLeft">
                            <img src="../../assets/img/wxrecord.png" alt="">
                        </div>
                        <div class="InfoRight">
                          <div class="Select fonts">
                            <h3>健康卡充值</h3>
                            <p class="fontsB activecolor">+￥300</p>
                          </div>
                            <p class="fonts">平顶山市第一人民医院.内科</p>
                            <p class="fonts">卡号：000029293030(渣渣辉) </p>
                            <div class="Select fontsMin fontC">
                              <p>201939320998489</p>
                              <p>2019-04-01 12:00:36</p>
                            </div>
                        </div>
                    </section>
                </el-tab-pane>
            </el-tabs>
        </section>
  </div>
</template>

<script>
import Header from '../../components/Header'

export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
    },
    //  充值记录详情
    Rechargerecord () {
      this.$router.push({
        path: '/Rechargerecord'
      })
    },
    //  消费记录详情
    Consumrecord () {
      this.$router.push({
        path: '/Consumrecord'
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 0.4rem;
    background: #fff;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    overflow-y: auto;
}
</style>
